Style method entries as signature cards in aliki theme#1669
Style method entries as signature cards in aliki theme#1669
Conversation
|
🚀 Preview deployment available at: https://42beeecc.rdoc-6cd.pages.dev (commit: be86678) |
st0012
force-pushed
the
signature-card-design
branch
2 times, most recently
from
7235073 to
251f5db
Compare
Add a subtle background card to method headers to visually separate the API signature zone from the documentation prose. - New `--color-sig-bg` token (lighter than `--color-code-bg`) - `.method-header` gets background, hairline border, padding - `.method-controls` absolutely positioned on `.method-detail` - `.method-heading a` removes inherited underline - `.method-description pre` uses left accent border (no outline) - `.method-description` gets `line-height: 1.7` for readability
st0012
force-pushed
the
signature-card-design
branch
from
251f5db to
be86678
Compare
There was a problem hiding this comment.
Pull request overview
Updates the Aliki RDoc theme CSS to visually present method signature blocks as “cards,” improving separation between API signatures and documentation text while keeping templates unchanged.
Changes:
- Introduces new signature-specific design tokens (
--color-sig-bg,--color-sig-border) for light/dark themes. - Styles method headers with a background “card” and accent border; removes underline styling from method heading links.
- Repositions the “Source” toggle button using absolute positioning and adjusts spacing in method descriptions.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| main .method-controls { | ||
| float: right; | ||
| position: absolute; | ||
| top: var(--space-3); | ||
| right: var(--space-3); | ||
| } |
There was a problem hiding this comment.
main .method-controls is now absolutely positioned, but .method-header/.method-heading no longer reserves horizontal space for it (the previous max-width: calc(100% - 6em) was removed). With long call sequences or method names, the signature text can render underneath the “Source” control.
Consider reserving space via padding-right on .method-header/.method-heading (or a grid/flex layout that allocates a dedicated column for .method-controls) so the signature and control cannot overlap.
| margin-top: var(--space-5); | ||
| padding-left: var(--space-2); | ||
| color: var(--color-text-primary); | ||
| line-height: var(--line-height-relaxed); | ||
| } | ||
|
|
There was a problem hiding this comment.
The selector main .method-description applies to both method docs and attribute docs (attributes also render a .method-description block, but don’t have the new .method-header “signature card”). The new margin-top/padding-left intended to align with the signature card will therefore also shift attribute descriptions.
If the intent is to only style method descriptions, consider scoping the rule to method entries (e.g., target .method-description that follows a .method-header within the same .method-detail) so attribute descriptions keep their previous alignment.
| margin-top: var(--space-5); | |
| padding-left: var(--space-2); | |
| color: var(--color-text-primary); | |
| line-height: var(--line-height-relaxed); | |
| } | |
| color: var(--color-text-primary); | |
| line-height: var(--line-height-relaxed); | |
| } | |
| main .method-detail .method-header + .method-description { | |
| margin-top: var(--space-5); | |
| padding-left: var(--space-2); | |
| } |
Summary
--color-sig-bgdesign token (lighter than--color-code-bg) for both light and dark themesCSS-only change — no template modifications.
Before / After